<script setup lang="ts">
import { navigateWithChannel } from '@/utils'

// 选中的项目列表（多选结果）
const selectedItems = ref<Array<{ id: string; name: string }>>([
  { id: '2', name: '选项二' },
  { id: '4', name: '选项四' },
])

// 单选结果
const selectedItem = ref<{ id: string; name: string } | null>(null)

// 打开多选选择器
const openMultiSelector = async () => {
  try {
    // 使用 navigateWithChannel 打开选择器并获取选择结果
    const result = await navigateWithChannel<Array<{ id: string; name: string }>>({
      url: '/pages-example/pages/common-selector/common-selector',
      events: {
        // 初始化选择器页面的配置
        init: eventChannel => {
          eventChannel.emit('initConfig', {
            multiple: true, // 多选模式
            preselected: selectedItems.value.map(item => item.id), // 直接传数组
          })
        },
      },
    })

    // 更新选中项列表
    selectedItems.value = result
    uni.showToast({
      title: `已选择 ${result.length} 项`,
      icon: 'none',
    })
  } catch (error) {
    console.error('选择失败', error)
    uni.showToast({
      title: '选择失败，请重试',
      icon: 'none',
    })
  }
}

// 打开单选选择器
const openSingleSelector = async () => {
  try {
    // 使用 navigateWithChannel 打开选择器并获取选择结果
    const result = await navigateWithChannel<{ id: string; name: string }>({
      url: '/pages-example/pages/common-selector/common-selector',
      events: {
        // 初始化选择器页面的配置
        init: eventChannel => {
          eventChannel.emit('initConfig', {
            multiple: false, // 单选模式
            preselected: selectedItem.value?.id ? [selectedItem.value.id] : [], // 预选项
          })
        },
      },
    })

    // 更新选中项
    selectedItem.value = result
    uni.showToast({
      title: `已选择: ${result.name}`,
      icon: 'none',
    })
  } catch (error) {
    console.error('选择失败', error)
    uni.showToast({
      title: '选择失败，请重试',
      icon: 'none',
    })
  }
}

// 快速选择模板 1
const selectTemplate1 = async () => {
  try {
    const result = await navigateWithChannel<Array<{ id: string; name: string }>>({
      url: '/pages-examplee/pages/common-selector/common-selector',
      events: {
        init: eventChannel => {
          eventChannel.emit('initConfig', {
            multiple: true,
            preselected: ['1', '3', '5'], // 模板1: 选择1,3,5
          })
        },
      },
    })
    selectedItems.value = result
    uni.showToast({
      title: `已选择模板1: ${result.length} 项`,
      icon: 'none',
    })
  } catch (error) {
    console.error('选择失败', error)
    uni.showToast({
      title: '选择失败，请重试',
      icon: 'none',
    })
  }
}

// 快速选择模板 2
const selectTemplate2 = async () => {
  try {
    const result = await navigateWithChannel<Array<{ id: string; name: string }>>({
      url: '/pages-examplee/pages/common-selector/common-selector',
      events: {
        init: eventChannel => {
          eventChannel.emit('initConfig', {
            multiple: true,
            preselected: ['2', '4'], // 模板2: 选择2,4
          })
        },
      },
    })
    selectedItems.value = result
    uni.showToast({
      title: `已选择模板2: ${result.length} 项`,
      icon: 'none',
    })
  } catch (error) {
    console.error('选择失败', error)
    uni.showToast({
      title: '选择失败，请重试',
      icon: 'none',
    })
  }
}

// 全部选择
const selectAll = async () => {
  try {
    const result = await navigateWithChannel<Array<{ id: string; name: string }>>({
      url: '/pages-examplee/pages/common-selector/common-selector',
      events: {
        init: eventChannel => {
          eventChannel.emit('initConfig', {
            multiple: true,
            preselected: ['1', '2', '3', '4', '5'], // 选择所有项
          })
        },
      },
    })
    selectedItems.value = result
    uni.showToast({
      title: `已选择全部: ${result.length} 项`,
      icon: 'none',
    })
  } catch (error) {
    console.error('选择失败', error)
    uni.showToast({
      title: '选择失败，请重试',
      icon: 'none',
    })
  }
}

// 清除多选结果
const clearMultiSelection = () => {
  selectedItems.value = []
}

// 清除单选结果
const clearSingleSelection = () => {
  selectedItem.value = null
}
</script>

<template>
  <!-- 页面容器 -->
  <view class="min-h-screen px-4 py-8 bg-black text-white">
    <view class="text-center mb-8">
      <text class="text-2xl font-bold">页面通信示例</text>
      <text class="block text-sm text-gray-400 mt-2">演示使用 page-channel 进行页面间通信</text>
    </view>

    <!-- 单选展示区 -->
    <view class="bg-gray-900 rounded-lg p-5 mb-6">
      <text class="text-gray-300 mb-2">单选结果:</text>
      <view v-if="selectedItem" class="bg-blue-900/30 p-3 rounded border border-blue-500/30">
        <text class="block">ID: {{ selectedItem.id }}</text>
        <text class="block mt-1">名称: {{ selectedItem.name }}</text>
      </view>
      <view v-else class="text-gray-500 italic p-3">
        <text>暂无选择</text>
      </view>
    </view>

    <!-- 单选操作按钮 -->
    <view class="flex gap-4 mb-8">
      <button
        class="flex-1 bg-green-600 text-white py-3 rounded-lg"
        hover-class="bg-green-700"
        @click="openSingleSelector"
      >
        单选模式
      </button>

      <button
        class="flex-1 bg-gray-700 text-white py-3 rounded-lg"
        hover-class="bg-gray-800"
        :disabled="!selectedItem"
        @click="clearSingleSelection"
      >
        清除单选
      </button>
    </view>

    <!-- 多选展示区 -->
    <view class="bg-gray-900 rounded-lg p-5 mb-6">
      <text class="text-gray-300 mb-2">多选结果 ({{ selectedItems.length }}):</text>
      <view
        v-if="selectedItems.length > 0"
        class="bg-blue-900/30 p-3 rounded border border-blue-500/30"
      >
        <view
          v-for="item in selectedItems"
          :key="item.id"
          class="mb-2 pb-2 border-b border-blue-800/30 last:border-0 last:mb-0 last:pb-0"
        >
          <text class="block">ID: {{ item.id }}</text>
          <text class="block mt-1">名称: {{ item.name }}</text>
        </view>
      </view>
      <view v-else class="text-gray-500 italic p-3">
        <text>暂无选择</text>
      </view>
    </view>

    <!-- 多选操作按钮 -->
    <view class="flex gap-4 mb-4">
      <button
        class="flex-1 bg-blue-600 text-white py-3 rounded-lg"
        hover-class="bg-blue-700"
        @click="openMultiSelector"
      >
        多选模式
      </button>

      <button
        class="flex-1 bg-gray-700 text-white py-3 rounded-lg"
        hover-class="bg-gray-800"
        :disabled="selectedItems.length === 0"
        @click="clearMultiSelection"
      >
        清除多选
      </button>
    </view>

    <!-- 模板选择按钮组 -->
    <view class="mt-4 grid grid-cols-2 gap-3">
      <button
        class="bg-purple-600 text-white py-3 rounded-lg"
        hover-class="bg-purple-700"
        @click="selectTemplate1"
      >
        模板1 (1,3,5)
      </button>

      <button
        class="bg-indigo-600 text-white py-3 rounded-lg"
        hover-class="bg-indigo-700"
        @click="selectTemplate2"
      >
        模板2 (2,4)
      </button>

      <button
        class="bg-pink-600 text-white py-3 rounded-lg"
        hover-class="bg-pink-700"
        @click="selectAll"
      >
        选择全部
      </button>
    </view>
  </view>
</template>

<style lang="scss">
// 按钮样式
button {
  &:disabled {
    opacity: 0.5;
  }
}
</style>
